<template>
  <div id="app">
  	<router-view></router-view>
  	<div class="bot-tab">
  		<router-link to="/index" class = "tab-item">
  			<i class="icon iconfont  icon-home"></i>
  			<font class="text">首页</font>
  		</router-link>
  		<router-link to="/list" class = "tab-item">
  			<i class="icon iconfont  icon-command"></i>
  			<font class="text">分类1</font>
  		</router-link>
  		<router-link to="/buycar" class = "tab-item">
  			<i class="icon iconfont  icon-cart"></i>
  			<font class="text">购物车</font>
  		</router-link>
  		<router-link to="/user" class = "tab-item">
  			<i class="icon iconfont  icon-user"></i>
  			<font class="text">我34</font>
  		</router-link>
  	</div>
  	
  </div>
</template>

<script>
	import './common/common.css'
export default { }
</script>

<style>
	.bot-tab{
		position:fixed;
		display: flex;
		width: 100%;
		height: 60px;
		background-color: #000;
		bottom: 0;
		font-size: 0;
	}
	.bot-tab .tab-item{
		display: inline-block;
		flex:1;
		font-size: 1rem;
		color: #fff;
	}
	.bot-tab .icon{
		margin-top: 10px;
		height: 25px;
		line-height: 25px;
		display: block;
		font-size: 1.5rem;
		text-align: center;
		color: #fff;
	}
	.bot-tab .tab-item.router-link-active,.bot-tab .tab-item.router-link-active .icon{
		color: #ffb400;
	}
	.bot-tab .text{
		height: 25px;
		display: block;
		line-height: 25px;
		text-align: center;
		font-size: .9rem;
	}

</style>

